<script setup lang="ts">
import { MenuItemKey } from '@/enums/navigation'
import type { TMenuItem, TMenuItemKey } from '@/types/navigation'
import LotteryAudioMenuItem from './LotteryAudioMenuItem.vue'
import LotteryFullscreenMenuItem from './LotteryFullscreenMenuItem.vue'

type TLotteryMenuProps = {
  items: TMenuItem[]
}

defineProps<TLotteryMenuProps>()

type TLotteryMenuEmits = {
  'click:item': [key: TMenuItemKey]
}

defineEmits<TLotteryMenuEmits>()
</script>

<template>
  <menu class="flex px-4">
    <li v-for="item in items" :key="item.key" class="mx-4 border rounded" role="menuitem">
      <button
        :id="item.key"
        class="w-16 h-16 flex flex-col justify-center items-center text-white hover:bg-gray-300/45"
        @click="$emit('click:item', item.key)"
      >
        <template v-if="item.key === MenuItemKey.FULL_SCREEN">
          <LotteryFullscreenMenuItem />
        </template>
        <template v-else-if="item.key === MenuItemKey.SOUND">
          <LotteryAudioMenuItem />
        </template>
        <template v-else>
          <component :is="item.icon" class="mb-2" style="font-size: 22px" />
          <span class="text-xs">{{ item.name }}</span>
        </template>
      </button>
    </li>
  </menu>
</template>
